<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.prime.com.tr/ui">





<p:dataTable var="user" id="usersList" value="#{usersManagementViewBean.users}" rowKey="#{user.id}" paginator="true" rows="10"
	selection="#{usersManagementViewBean.selectedUser}" liveScroll="true" height="100" selectionMode="single">

	<!--   <p:ajax event="rowSelect" update=":form:display" oncomplete="carDialog.show()" />   -->

	<f:facet name="header">

		<h:outputText value="#{msgs['usersManagementMainView.usersList.title']}" />
	</f:facet>


	<p:column headerText="Email" sortBy="#{user.eMail}" filterBy="#{user.eMail}">  
            #{user.eMail}
        </p:column>

	<p:column headerText="First name" sortBy="#{user.login}" filterBy="#{user.login}">  
            #{user.profile.firstName} 
        </p:column>

	<p:column headerText="Last name" sortBy="#{user.profile.firstName}" filterBy="#{user.profile.firstName}">  
            #{user.profile.surname} 
        </p:column>
	<p:effect type="blind" event="click">
		<f:param name="direction" value="'horizontal'" />
	</p:effect>
</p:dataTable>


<!--  
<script>




$(document).ready(function() {
    //Tie a menu to the right click of each row of the table with a class of customerRow
    $(".customerRow").contextMenu({ menu: 'myMenu' }, 
        function(action, el, pos) { contextMenuWork(action, el, pos); });

    //Tie a menu the left click of each td with the class of openmenu !Important - requires modified
    //jquery.contextMenu.js that allows for leftButton: true
    $(".openmenu").contextMenu({ menu: 'myMenu', leftButton: true }, 
        function(action, el, pos) { contextMenuWork(action, el.parent("tr"), pos); });

    });

    function contextMenuWork(action, el, pos) {

        switch (action) {
            case "delete":
                {
                    //Popup Delete Confirmation - included in demo and in download
                    break;
                }
            case "insert":
                {
                    //Popup Insert Dialog- included in demo and in download
                    break;
                }

            case "edit":
                {
                    //Popup Edit Dialog
                    break;
                }
        }
   }
});    


function fixContextMenuCoordiantes(menuItem)
{
	console.log(menuItem);
}

$(document).ready( function() {
	 
    $("#selector").contextMenu({
        menu: 'myMenu'
    },
        function(action, el, pos) {
        alert(
            'Action: ' + action + '\n\n' +
            'Element ID: ' + $(el).attr('id') + '\n\n' +
            'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' +
            'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
            );
    });
 
});
</script>

-->

<p:contextMenu for="usersList" id="usersListContextMenu">
	<p:menuitem value="Edit" update="display" icon="ui-icon ui-icon-search" oncomplete="carDialog.show()"
		onstart="fixContextMenuCoordiantes(this);" />
	<p:menuitem value="Delete" update="cars" icon="ui-icon ui-icon-close" actionListener="#{usersManagementViewBean.deleteUser}"
		onstart="fixContextMenuCoordiantes(this);" />
</p:contextMenu>
<!-- 
<p:commandButton value="Hide"
	update="usersList" oncomplete="usersLista.hide();"> 
</p:commandButton>-->
<div style="height: 5px;">
</div>
<p:commandButton update="usersList" value="Edit user" actionListener="#{usersManagementViewBean.addUser}" />
<p:commandButton update="usersList" value="Delete user" actionListener="#{usersManagementViewBean.addUser}" />

<p:commandButton type="button" value="#{msgs['usersManagementMainView.addUser']}" onclick="addUser.show()" />


<!-- <h:outputFormat  for="email"
			value="#{msgs['common.inputInvalid']}" >
			<f:param value="#{msgs['usersManagementMainView.email']}" />
			</h:outputFormat> -->

<p:dialog header="#{msgs['usersManagementMainView.addUser']}" widgetVar="addUser" resizable="false" closable="true"
	closeListener="#{usersManagementViewBean.clean}" width="430" height="420" id="addUserDialog" modal="true">



	<p:messages autoUpdate="true"></p:messages>
	<h:panelGrid id="addUserGrid" columns="3" style="margin-bottom:10px">

		<h:outputLabel for="email" value="#{msgs['usersManagementMainView.email']}" />
		<p:inputText id="email" value="#{usersManagementViewBean.email}" label="#{msgs['usersManagementMainView.email']}"
			required="true">
			<p:ajax update="login" event="blur" listener="#{usersManagementViewBean.updateLogin}" />
			<p:ajax update="emailMsg email" event="blur" />
			<f:validator validatorId="myRegexValidator" />
			<f:attribute name="pattern" value="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$" />
		</p:inputText>
		<p:message id="emailMsg" for="email" display="icon" />

		<h:outputLabel for="firstname" value="#{msgs['usersManagementMainView.firstName']}" />
		<p:inputText id="firstname" value="#{usersManagementViewBean.firstname}" required="true"
			label="#{msgs['usersManagementMainView.firstName']}">
			<p:ajax event="blur" update="firstnameMsg firstname" />
		</p:inputText>
		<p:message id="firstnameMsg" for="firstname" display="icon" />

		<h:outputLabel for="secondName" value="#{msgs['usersManagementMainView.secondName']}" />
		<p:inputText id="secondName" label="#{msgs['usersManagementMainView.secondName']}" value="#{usersManagementViewBean.secondName}" />
		<!--  <p:ajax event="blur" update="secondName secondNameMsg" />
		</p:inputText>
		<p:message id="secondNameMsg" for="secondName" display="icon" />-->	

		<h:outputLabel for="surname" value="#{msgs['usersManagementMainView.surname']}" />
		<p:inputText id="surname" value="#{usersManagementViewBean.surname}" label="#{msgs['usersManagementMainView.surname']}"
			required="true">
			<p:ajax event="blur" update="surname surnameMsg" />
		</p:inputText>
		<p:message for="surname" id="surnameMsg" display="icon" />

		<h:outputLabel for="login" value="#{msgs['usersManagementMainView.login']}" />
		<p:inputText id="login" value="#{usersManagementViewBean.login}" label="#{msgs['usersManagementMainView.login']}"
			required="true">
			<f:validator validatorId="myRegexValidator" />
			<f:attribute name="pattern" value="^[_a-z0-9-]+(\.[_a-z0-9-]+)*" />
			<p:ajax event="blur" update="login loginMsg" />
		</p:inputText>
		<p:message for="login" id="loginMsg" display="icon" />


		<h:outputLabel for="address" value="#{msgs['usersManagementMainView.address']}" />
		<p:inputTextarea id="address" value="#{usersManagementViewBean.address}" label="#{msgs['usersManagementMainView.address']}"
			required="true" autoResize="false" rows="3" cols="19">
			<p:ajax event="blur" update="address addressMsg" />
		</p:inputTextarea>
		<p:message for="address" id="addressMsg" display="icon" />

		<!--                 <h:outputLabel for="firstname" value="#{msgs['usersManagementMainView.firstName']}" />  
            <p:inputText id="firstname" value="#{usersManagementViewBean.firstname}" />  
                        <h:outputLabel for="firstname" value="#{msgs['usersManagementMainView.firstName']}" />  
            <p:inputText id="firstname" value="#{usersManagementViewBean.firstname}" />
                                    <h:outputLabel for="firstname" value="#{msgs['usersManagementMainView.firstName']}" />  
            <p:inputText id="firstname" value="#{usersManagementViewBean.firstname}" />  
                        <h:outputLabel for="firstname" value="#{msgs['usersManagementMainView.firstName']}" />  
            <p:inputText id="firstname" value="#{usersManagementViewBean.firstname}" /> -->
	</h:panelGrid>

	<p:commandButton image="ui-icon ui-icon-disk" value="#{msgs['usersManagementMainView.save']}"
		actionListener="#{usersManagementViewBean.addUser}" update="#{cc.attrs.id}:#{cc.attrs.viewName}:usersList addUserGrid"
		oncomplete="handleLoginRequest(xhr, status, args);" />
	<script type="text/javascript">  
    function handleLoginRequest(xhr, status, args) {
        console.log(args) ;
        console.log(status) ;
        console.log(xhr) ;
        if(args.validationFailed || args.duplicateData ) {  
            jQuery('addUserDialog').parent().effect("shake", { times:3 }, 100);  
        } else {  
        	addUser.hide();
        }  
    } 
</script>  
`

</p:dialog>

<!--  
<p:outputPanel id="display" style="display:block;margin-top:10px;">  
    <h:outputText id="name" value="Hello #{pprBean.firstname}" rendered="#{not empty pprBean.firstname}"/>  
</p:outputPanel>  
-->



</html>